﻿function loadcomplete() {
    registertableevent();

    $('#tabscontainer').tabs({});

    $(".tabs-panels").css("margin-top", "0px");

    var chart = new Highcharts.Chart({
        chart: {  
            zoomType: 'x',
            renderTo: $("#chartContainer")[0],
            events: {
                click: function (event) {
                    var index = Math.round(event.xAxis[0].value)+1;
                    $("#tabscontainer").tabs('select', '时间油量');

                    //设置时间油量表的选中行并滚动滚动条到该行
                    var container = $('#oilanalysiscontainer');
                    var preindex = index-1;
                    if (preindex == 0) {
                        preindex = 1;
                    }
                    var scrollTo = $("#oilanalysis tbody tr:nth-child(" + preindex + ")");
                    container.scrollTop(
                        scrollTo.offset().top - container.offset().top + container.scrollTop()
                    );
                    //$("#oilanalysiscontainer").animate({ scrollTop: $("#oilanalysis tbody tr:nth-child(" + (index - 1) + ")").offset().top }, 1);
                    $("#oilanalysis tbody tr:nth-child("+index+")").click();
                    //}
                }
            }
        },  
        title: {  
            text: $("#vehicleName").val() + '油量分析'
        },  
        xAxis: [{  
            categories: $("#timeData").val().split(","),
            tickInterval: ($("#timeData").val().split(",").length-$("#timeData").val().split(",").length%4)/4
        }],  
        yAxis: [{ // 主Y轴  
            labels: {  
                formatter: function() {  
                    return this.value;  
                },  
                style: {  
                    color: '#4572A7'
                },
                x: -10
            },  
            title: {  
                text: '里程(km)',
                style: {  
                    color: '#4572A7'
                },
                align: 'high',
                offset: -10,
                rotation: 0,
                y: -10
            },
            lineWidth: 1,
            opposite: false,
            offset: 40,
            allowDecimals: false
       
        }, { // 次Y轴  
            gridLineWidth: 0,  
            title: {  
                text: '油量(L)',
                style: {  
                    color: '#AA4643'
                },
                align: 'high',
                offset: -10,
                rotation: 0,
                y: -10
            },  
            labels: {  
                formatter: function() {  
                    return this.value;  
                },  
                style: {  
                    color: '#AA4643'
                },
                x: -10
            },
            lineWidth: 1,
            opposite:false,
            offset: 0,
            allowDecimals: false
        }, { // 第三级Y轴  
            gridLineWidth: 0,  
            title: {  
                text: '速度(km/h)',  
                style: {  
                    color: '#89A54E'
                },
                align: 'high',
                offset: 40,
                rotation: 0,
                y: -10
            },  
            labels: {  
                formatter: function() {  
                    return this.value;  
                },  
                style: {  
                    color: '#89A54E'
                },
                x:5
            },
            lineWidth: 1,
            opposite: true,
            allowDecimals: false,
            min:0
        }],
        plotOptions: {
            series: {
                lineWidth: 1,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        },
        tooltip: {  
            shared: true,
            crosshairs:[{
                enabled:true,//是否显示X轴标线
                width:1,//标线宽度
                color:'red' //标线颜色值
            }]
        },  
        legend: {  
            layout: 'vertical',  
            align: 'right',  
            verticalAlign: 'top',  
            floating: true,  
            backgroundColor: '#FFFFFF',
            y:100
        },  
        series: [{  
            name: '里程',  
            color: '#4572A7',  
            type: 'spline',
            yAxis: 0,  
            //data: $("#mileageData").val().split(","),
            marker: {
                enabled: false
            },
            tooltip: {  
                valueSuffix: 'km'  
            }  
       
        }, {  
            name: '油量',  
            type: 'spline',  
            color: '#AA4643',  
            yAxis: 1,  
            //data: $("#oilData").val().split(","),
            marker: {  
                enabled: false  
            },
            tooltip: {  
                valueSuffix: 'L'  
            }  
       
        }, {  
            name: '速度',  
            color: '#89A54E',  
            type: 'spline',
            //data:[11.1,11.1,11.1,11.1,11.1,11.1,1,11.11,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,11.1,1,11.1,11.1,11.1,11.11,11.1,11.1,11.1],
            //data: $("#speedData").val().split(","),
            yAxis:2,
            marker: {
                enabled: false
            },
            tooltip: {  
                valueSuffix: 'km/h'  
            }  
        }]  
    });
    var y1s = $("#mileageData").val().split(",");
    var y2s = $("#oilData").val().split(",");
    var y3s = $("#speedData").val().split(",");
    var y1arrsy = new Array();
    var y2arrsy = new Array();
    var y3arrsy = new Array();
    for (var i = 0; i < y1s.length; i++) {
        y1arrsy.push(Number(y1s[i]));
        y2arrsy.push(Number(y2s[i]));
        y3arrsy.push(Number(y3s[i]));
    }
    chart.series[0].setData(y1arrsy);
    chart.series[1].setData(y2arrsy);
    chart.series[2].setData(y3arrsy);

    $("svg").css("font-family", "微软雅黑, serif");
}